<template>
  <div class="clearfix" v-bind="$attrs">
    <a-upload :action="uploadImgUrl" :multiple="true" :before-upload="beforeUpload" :file-list="fileList"
      :headers="headers" name="files" @change="handleChange">
      <a-button type="primary"> <a-icon type="upload" /> 上传 </a-button>
    </a-upload>
    <!-- <span v-if="value && type == 'file'">
      <br>
      <a :href="value" target="_blank">{{ value }}</a>
    </span> -->
  </div>
</template>

<script>
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  name: 'ImageUpload',
  props: {
    value: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: 'image'
    },
    count: {
      type: Number,
      default: 1
    }
  },
  components: {
  },
  data() {
    return {
      loading: false,
      open: false,
      uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/uploads',
      headers: {
        Authorization: 'Bearer ' + storage.get(ACCESS_TOKEN)
      },
      fileList: [],
      uploadList: [],
      number: 0
    }
  },
  mounted() {
  },
  methods: {
    handleCancel() {
      this.previewVisible = false
    },
    async handleChange(info) {
      this.fileList = [...info.fileList]
      if (info.file.status === 'done') {
        if (info.file.response.code !== 200) {
          this.$message.error('上传失败' + info.file.response.msg)
          this.loading = false
          this.number--;
          this.uploadedSuccessfully();
          return
        }
        this.uploadList.push({ name: info.file.response.fileNames, url: info.file.response.fileNames });
        this.$message.success({ content: "上传成功" });
        let fileList = this.fileList.map(file => {
          if (file.response) {
            file.url = file.response.urls;
          }
          return file;
        });
        this.fileList = fileList;
        this.uploadedSuccessfully();
      } else if (info.file.status === 'removed') {
        this.uploadList = this.uploadList.filter(item => item.url !== info.file.url)
        let fileList = this.fileList.map(file => {
          if (file.response) {
            file.url = file.response.urls;
          }
          return file;
        });
        this.fileList = fileList;
        this.uploadedSuccessfully();
      }
    },
    uploadedSuccessfully() {
      if (this.uploadList.length === this.number) {
        // this.fileList = this.fileList.concat(this.uploadList);
        this.uploadList = [];
        this.number = 0;
        this.$emit("input", this.listToString(this.fileList));
        this.fileList = this.fileList.map(file => {
          if (file.response) {
            file.url = null;
          }
          return file;
        });
      }
    },
    beforeUpload(file) {
      // 文件类型(file.type)、大小限制(file.size)
      // const isLt2M = file.size / 1024 / 1024 < 2
      // if (!isLt2M) {
      //   this.$message.error('图片大小限制 2MB!')
      // }
      console.log(file);
      this.number++;
      return true
    },
    listToString(list, separator) {
      let strs = "";
      separator = separator || ",";
      for (let i in list) {
        if (list[i].url) {
          strs += list[i].url.replace(this.baseUrl, "") + separator;
        }
      }
      return strs != "" ? strs.substr(0, strs.length - 1) : "";
    },
  }
}
</script>
<style lang="less" scoped>
img {
  width: 128px;
  height: 128px;
}

.clearfix {
  display: inline-block;
}
/deep/ .ant-upload-list-item-info {
  padding:0 20px 0 4px;
}
</style>
